<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <script>
        if(!('noModule' in HTMLScriptElement.prototype)){
            alert('你的浏览器不能很好的支持 es6，请用最新的chrome、firefox浏览!')
        }
        var config = {
            // github user acount
            'user': 'ahuigo',
            'repo': 'a', //'repo': 'ahuigo.github.io',
            'weibo_uid': 1607772514,
            'twitter_user': 'ahuigoo',
            'disqus_user': 'ahuigo',
        }
    </script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1" />
    <title>AHUIGO的自留地</title>
    <meta name="author" content="ahuigo">
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">

    <link href="css/main.css" rel="stylesheet">

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js"></script>

    <link href="https://cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/monokai-sublime.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.min.css">
    <script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.min.js"></script>

    <script src="js/marked.js"></script>
    <script src="js/toc.js"></script>
</head>

<body class="layout-documentation page-layout">
    <div>
        <div class="pure-menu pure-menu-horizontal" style=" background: #363636; ">
            <a href="#" class="pure-menu-heading pure-menu-link"><strong>AHUIGO'S BLOG</STRONG></a>
            <ul class="pure-menu-list">
                <li class="pure-menu-item"><a class="button is-primary" href="/b">Home</a></li>
                <li class="pure-menu-item"><a class="button is-primary" href="#/">Archive</a></li>
                <li class="pure-menu-item"><a class="button is-primary" href="#/README.md">Readme</a></li>
                <li class="pure-menu-item"><a class="button is-primary" href="/b/atom.xml">Rss</a></li>
                <li class="pure-menu-item"><a class="button is-primary" href="https://codepen.io/">Codepen</a></li>
            </ul>
            <div class="pure-menu-heading" style="width:128px;height:128px" v-pre>
                <canvas id="canvas" width="128" height="128" style="background-color:#333"></canvas>
            </div>
        </div>

        <div class="main"  id="app">
            <div :class="{left:true, 'active':showMenu}" >
                <button class="button is-primary menu-toggle" :class="{a:true}" @click="showMenu=!showMenu">
                        <template v-if="showMenu"> Close </template>
                        <template v-else>Open</template>
                </button>
                <tree-folder :nodes="nodes" :class="{'active':showMenu}" :show="show"></tree-folder>
            </div>
            <div class="middle" v-on="showMenu?{click:r=>showMenu=false}:{}">
                <router-view></router-view>
                <div class="hr"></div>
                <div class="share" style="display:flex;justify-content:space-between">
                    <div>
                        <h4>关注我</h4>
                        <div>
                        <iframe width="120" height="22" :src="`https://platform.twitter.com/widgets/follow_button.4a8202e5fcbfb5ba8d36683841f4d020.en.html#screen_name=${config.twitter_user}&width=67&height=22&show_count=false&show_screen_name=true`"></iframe>
                        <iframe width="120" height="22" :src="`https://widget.weibo.com/relationship/followbutton.php?btn=light&style=1&uid=${config.weibo_uid}&width=67&height=22&language=zh_cn`"></iframe>
                        </div>
                    </div>
                    <div>
                        <h4>分享文章</h4>
                        <div>
                            <span class="icon twitter-icon" @click="openShare('twitter', this)"></span>
                            <span class="icon weibo-icon" @click="openShare('weibo')"></span>
                        </div>
                    </div>
                </div>
                <div class="hr"></div>
                <div id="disqus_thread">
                    <button id="show-comments" class="button is-primary" onclick="disqus();return false;">Load Discus</button>
                </div>
            </div>
            <div class="right">
                <div id="toc"></div>
            </div>
        </div>
        <button class="button is-primary" onclick="window.scroll(0, 10)" id="up">Up</button>
        <button class="button is-primary" onclick="window.scrollTo(0,document.body.scrollHeight)" id="down">Down</button>
    </div>
    <template id="tree-folder">
        <ul class="pure-menu-list" v-if="show">
            <li class="pure-menu-item" v-for="(file,index) in nodes" :key="file.path">
                <a v-if="file.type==='dir'" :type="file.type" @click="openFolder(file)" class="folder">{{file.name}}
                </a>
                <router-link v-else :type="file.type" class="file" :to="'/'+file.path">{{file.name.slice(0,-3)}} </router-link>
                <tree-folder v-if="file.nodes" :show="file.show" :nodes="file.nodes"></tree-folder>
            </li>
        </ul>
    </template>
    <template id="md">
        <div id="content" v-html="marked(md)"></div>
    </template>
    <script src="js/blog.js"></script>
</body>
</html>
